<template>
	<view class="head">
		<view class="status-bar" :style="{'padding-top':statusBarHeight + 'px'}"></view>
		<view class="nav-bar">
			<view class="back-btn flex-box" @tap="navBack" v-if="pagesLength > 1">
				
				<u-icon name="arrow-left" color="#fff"></u-icon>
			</view>
			<view class="title">{{title}}</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		name:'myHead',
		props:{
			title:{
				type:String,
				default:'标题'
			}
		},
		computed:{
			statusBarHeight(){
				return this.$store.getters.systemInfo.statusBarHeight
			},
			pagesLength() {
				return getCurrentPages().length
			}
		},
		methods:{
			navBack() {
				this.$emit('navBack')
			}
		}
	} 
</script>

<style lang="less" scoped>
	@import '@/theme.less';
	.head{
		width:100%;
		box-sizing:border-box;
		background-color: @themeColor;
		color:#fff;
		text-align: center;
		font-size:28rpx;
		position:fixed;
		top:0;
		left:0;
		z-index:99;
		.status-bar{
			width:100%;
		}
		.nav-bar{
			display:flex;
			height:88rpx;
			line-height: 88rpx;
			justify-content: center;
			align-items: center;
			.title{
				flex:1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding:0 20rpx;
				text-align: left;
				box-sizing: border-box;
			}
			.back-btn {
				width:36rpx;
				height:36rpx;
				margin:0 20rpx;
			}
		}
	}
</style>
